.mine-container {
  .background-image {
    width: 750rpx;
    height: 380rpx;
    overflow: hidden;
    border-radius: 0 0 20rpx 20rpx;

    .t-image {
      width: 750rpx;
      height: 750rpx;
    }
  }

  .container {
    .user-info {
      position: relative;
      top: -60rpx;
      display: flex;
      padding: 20rpx;
      background-color: #ffffff;
      border-radius: 20rpx;
      align-items: center;
      justify-content: space-between;

      .user-avatar-name {
        width: 410rpx;
        display: flex;
        align-items: center;

        .avatar {
          padding-right: 20rpx;

          .t-avatar {
            background-color: #ffffff;
          }

          .t-icon {
            color: #007F61
          }
        }

        .username {
          font-size: 30rpx;
          font-weight: 700;
          text-overflow: ellipsis;
          overflow: hidden;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
        }
      }

      .user-vip-info {
        display: flex;
        font-size: 28rpx;

        .user-point {
          width: 150rpx;
          display: flex;
          flex-direction: column;
          align-items: center;

          .point {
            font-size: 30rpx;
            font-weight: 700;
          }
        }

        .user-coupon {
          width: 150rpx;
          display: flex;
          flex-direction: column;
          align-items: center;

          .coupon {
            font-size: 30rpx;
            font-weight: 700;
          }
        }
      }
    }

    .vip-level {
      width: 710rpx;
      height: 300rpx;
      background: linear-gradient(45deg, #ffffff 0%, #B8DCD3 5%, #e6f0e6 20%,
          #B8DCD3 25%, #e6f0e6 40%, #B8DCD3 50%, #e6f0e6 60%, #78BBAB 100%);
      margin-top: -40rpx;
      border-radius: 50rpx;

      .title {
        display: block;
        font-size: 30rpx;
        line-height: 50rpx;
        width: 200rpx;
        height: 50rpx;
        text-align: center;
        color: white;
        background-color: #007F61;
        border-radius: 50rpx 0 50rpx 0;
      }

      .detail {
        padding: 30rpx;
        height: 200rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }

      .level {
        display: block;
        color: #007F61;
        font-size: 36rpx;
        font-weight: 700;
      }

      .date {
        display: block;
        color: #007F61;
        font-size: 30rpx;
      }

      .growth {
        display: flex;
        justify-content: space-between;
        color: #007F61;
        font-size: 26rpx;
      }

      .t-progress {
        .t-progress__info {
          display: none !important;
        }
      }
    }

    .mine-function {
      width: 710rpx;
      background: #ffffff;
      border-radius: 50rpx;
      margin-top: 20rpx;
      padding-bottom: 20rpx;

      .title {
        display: block;
        font-weight: 700;
        padding: 20rpx 0 20rpx 50rpx;
      }

      .t-grid-item__image--icon {
        background-color: #ffffff !important;
      }

      .t-grid-item__text {
        padding: 0;
      }

      .t-grid-item__content {
        padding: 0;
      }
    }
  }
}